<template>
	<el-card>
		<div slot="header" class="clearfix">
			<span>组织架构管理(原成员管理)</span>
		</div>

		<v-searchForm :form-data="filter_info" :form-title="formTitle" @search="search" @reset="reset" />
		<v-tableBtns :show-export="true" :table-title="exportTitle" :table-data="exportData" />

		<v-table :table-title="tableTitle" :table-data="tableData" :deletable="false" btn-class="btn" @edit="edit" />
		<v-pagination :page-info="pageInfo" :get-table-list="getTableList" />

	</el-card>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		name: 'Home',
		data() {
			return {
				// f分页
				pageInfo: {
					pageNumber: 1,
					pageSize: 30,
					totalPage: 0,
					totalRow: 0
				},
				formTitle: [{
					cn: '姓名',
					en: 'name'
				}],
				filter_info: {},
				tableTitle: [
				  {
						cn: 'id',
						en: 'fansid',
						sortable: true
					},
					{
						cn: '姓名',
						en: 'fansname'
					},
					{
						cn: '昵称',
						en: 'nickname'
					},
					{
						cn: '角色',
						en: 'role_name'
					},
					{
						cn: '头像',
						en: 'avatar_url',
						type: 'img'
					},
					{
						cn: '所属公司',
						en: 'conpaniesname'
					},
					{
						cn: '联系电话',
						en: 'tel'
					},
					{
						cn: '创建时间',
						en: 'created_at'
					}
				],
				tableData: [],

				exportTitle: [],
				exportData: [],

				originTableData: []

			}
		},
		activated() {
			this.getTableList()
		},
		methods: {
			getTableList() {
				const data = {
					page: this.pageInfo.pageNumber,
					...this.filter_infos,
					rows: this.pageInfo.pageSize
				}
				const loading = this.$loading()
				loading.close()
				this.$post('action/WxUserCtrl/dataGrid', data)
					.then(res => {
						const list = res.data.list.map((item, index) => {
							return item
						})
						this.pageInfo.totalPage = res.data.totalPage
						this.pageInfo.totalRow = res.data.totalRow

						this.tableData = list || {}
					})
			},

			addNew() {
				// 跳转到创建页面
				this.$router.push({
					name: 'company_manage.framework.edit'
				})
			},
			// 搜索
			search() {
				this.pageInfo.pageNumber = 1
				this.getTableList()
			},
			reset() {
				if (this.origin_filter) {
					this.filter_info = this.$deepClone(this.origin_filter)
				} else {
					this.filter_info = {}
				}
				this.getTableList()
			},
			edit(val) {
				this.$router.push({
					name: 'company_manage.framework.edit',
					query: {
						details: JSON.stringify(val.row)
					}
				})
			},
			// 排序
			sortChange({
				column,
				prop,
				order
			}) {
				console.log(column, prop, order)
				this.sidx = prop || 'publish_at'
				this.sortKey = order === 'ascending' ? 'asc' : null
				this.getTableList()
			}

		},
		computed: {
			...mapGetters([
				'name',
				'roles'
			]),
			filter_infos() {
				const data = {}
				const origin = this.$deepClone(this.filter_info)
				for (const key in origin) {
					if (!this.filter_info[key] && this.filter_info[key] !== 0) {
						this.$delete(this.filter_info, key)
						continue
					}
					if (key === 'created_at') {
						data.start_Date = origin[key][0]
						data.end_Date = origin[key][1]
					} else {
						data[key] = origin[key]
					}
				}
				if (!origin.created_at) {
					delete data.start_Date
					delete data.end_Date
				}
				return data
			}
		}
	}
</script>
